<template>
  <el-form style="width: 60%" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

    <el-form-item label="合同日期" prop="Contract_date">
      <el-input v-model="ruleForm.Contract_date"></el-input>
    </el-form-item>

    <el-form-item label="产品代码" prop="Product_id">
      <el-input v-model="ruleForm.Product_id"></el-input>
    </el-form-item>

    <el-form-item label="规格型号" prop="Product_type">
      <el-input v-model="ruleForm.Product_type"></el-input>
    </el-form-item>

    <el-form-item label="数量" prop="Product_amount">
      <el-input v-model="ruleForm.Product_amount"></el-input>
    </el-form-item>

    <el-form-item label="单价" prop="Product_price">
      <el-input v-model="ruleForm.Product_price"></el-input>
    </el-form-item>

    <el-form-item label="供应商单位" prop="Supplier">
      <el-input v-model="ruleForm.Supplier"></el-input>
    </el-form-item>

    <el-form-item label="出库日期" prop="Deliver_date">
      <el-input v-model="ruleForm.Deliver_date"></el-input>
    </el-form-item>

    <el-form-item label="供应商地址" prop="Supply_place">
      <el-input v-model="ruleForm.Supply_place"></el-input>
    </el-form-item>
    <el-form-item label="供应商电话" prop="Supply_phone">
      <el-input v-model="ruleForm.Supply_phone"></el-input>
    </el-form-item>
    <el-form-item label="供应方式" prop="Supply_way">
      <el-input v-model="ruleForm.Supply_way"></el-input>
    </el-form-item>
    <el-form-item label="供应商姓名" prop="Supply_name">
      <el-input v-model="ruleForm.Supply_name"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data () {
    return {
      ruleForm: {
        Contract_id: '',
        Contract_date: '',
        Product_id: '',
        Product_type: '',
        Product_amount: '',
        Product_price: '',
        Supplier: '',
        Deliver_date: '',
        Supply_place: '',
        Supply_phone: '',
        Supply_way: '',
        Supply_name: ''
      },
      rules: {
        Contract_date: [
          { required: true, message: '合同日期不能为空', trigger: 'blur' }
        ],
        Product_id: [
          { required: true, message: '产品代码不能为空', trigger: 'blur' }
        ],
        Product_type: [
          { required: true, message: '规格型号不能为空', trigger: 'blur' }
        ],
        Product_amount: [
          { required: true, message: '数量不能为空', trigger: 'blur' }
        ],
        Product_price: [
          { required: true, message: '单价不能为空', trigger: 'blur' }
        ],
        Supplier: [
          { required: true, message: '供货单位不能为空', trigger: 'blur' }
        ],
        Deliver_date: [
          { required: true, message: '出库日期不能为空', trigger: 'blur' }
        ],
        Supply_place: [
          { required: true, message: '供应商地址不能为空', trigger: 'blur' }
        ],
        Supply_phone: [
          { required: true, message: '供应商电话不能为空', trigger: 'blur' }
        ],
        Supply_way: [
          { required: true, message: '供应商方式不能为空', trigger: 'blur' }
        ],
        Supply_name: [
          { required: true, message: '供应商姓名不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm (formName) {
      const _this = this
      console.log(this.ruleForm)
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.axios.post('http://localhost:8111/add', this.ruleForm).then(function (res) {
            console.log(res.data)
            // eslint-disable-next-line eqeqeq
            if (res.data.msg == '添加成功') {
              _this.$alert('合同编号为' + _this.ruleForm.Contract_id + '添加成功！', '消息', {
                confirmButtonText: '确定',
                callback: action => {
                  _this.$router.push('/contractInformation')
                }
              })
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
